<template>
    <view class="uni-flex dialog" @touchmove.stop.prevent="moveHandle" @click="dialogClose" v-if="isShowDialog">
        <!-- <view class="dialog-block"> -->
        <view class="dialog-content" @click.stop="onClick" :style="getMaxHeight" :class="[isShowMaskContent ? 'show-dialog' : 'hide-dialog', {content: content}]">
            <scroll-view :scroll-y="true" class="dialog-list">
				<view id="content" class="content">
					<slot v-if="!content"></slot>
					<text v-else>{{content}}</text>
				</view>
            </scroll-view>
            <view class="dialog-close iconfont iconfabu-guanbi1" @click="dialogClose"></view>
        </view>
        <!-- </view> -->

    </view>
</template>

<script>
    // import Utils from '@/common/js/center.js';
    export default {
        data() {
            return {
                isShowDialog: false, // 整个弹窗
                isShowMaskContent: false, // 白色填充区域
				maxHeight: 200
            }
        },
        methods: {
            dialogClose() {
				let that = this;
				if(this.maskTapClose){
					that.isShowMaskContent = false;
					setTimeout(function() {
						that.isShowDialog = false;
						that.$forceUpdate();
						that.$emit('close')
					}, 100);
				} else {
					that.$emit('close')
				}
            },
			onClick(e) {
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				// #ifndef APP-NVUE
					// this.getScrollHeight();
				// setTimeout(this.getScrollHeight, 500);
				this.changeHight(100);
				// #endif
			},
			changeHight(num){
				if(num === 0) return;
				let handler = setTimeout(()=>{
					this.getScrollHeight();
					this.changeHight(--num);
					clearTimeout(handler)
					handler = null;
				}, 10)
			},
			moveHandle(e){
				// e.stopPropagation();
				// e.preventDefault();
			},
			getScrollHeight(index = 0) {
				const views = uni.createSelectorQuery().in(this)
				const that = this;
				views
					.select("#content")
					.fields({
						size: true
					}, data => {
						// TODO 百度中可能获取不到节点信息 ，需要循环获取
						if (index >= 10) return
						if (!data) {
							index++
							this.getScrollHeight(false, index)
							return
						}
						uni.getSystemInfo({
							success(res) {
								let length = data.height;
								if(length > res.windowHeight*0.9){
									length = parseInt(res.windowHeight*0.9);
								}
								// #ifdef APP-NVUE
								that.maxHeight = length + 1
								// #endif
								// #ifndef APP-NVUE
								that.maxHeight = length
								// #endif
							}
						})
					})
					.exec()
			},
        },
		computed:{
			getMaxHeight(){
				if(typeof this.maxHeight === 'string'){
					return 'height:'+this.maxHeight;
				}
				if(typeof this.maxHeight === 'number'){
					return 'height:'+this.maxHeight + 'px'
				}
				
				return '123'
			}
		},
		props:{
			content: String,
			show: Boolean,
			mask: Boolean,
			maskTapClose: Boolean,
			// maxHeight: [Number, String]
		},
		watch:{
			show:{
				handler(value){
					if(value){
						this.isShowDialog = true;
						this.changeHight(30);
					}
					else {
						let that = this;
						this.isShowMaskContent = false;
						setTimeout(function() {
							that.isShowDialog = false;
							that.$forceUpdate();
						}, 100);
					}
				},
				immediate: true
			},
			mask:{
				handler(value){
						this.isShowMaskContent = value;
				},
				immediate: true
			}
		},
        mounted() {
            // let that = this;
            // 显示遮罩
            // Utils.$on('is-show-message-mask', () => {
            //     that.isShowMaskContent = true;
            //     that.isShowDialog = true;
            // });
        }
    }
</script>

<style scoped>
    .dialog {
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        position: fixed;
        left: 0;
        top: 0;
		overflow: hidden;
		
		justify-content: center;
		align-items: center;
    }

    .dialog-block {}

    .dialog-content {
        width: 100%;
        /* height: 80vh; */
		/* min-height: 80%; */
        /* margin: 0 auto;
        border-radius: 10px; */
        overflow: hidden;
        position: relative;
    }

    .dialog-close {
        width: 40upx;
        height: 40upx;
        border-radius: 20upx;
        position: absolute;
        right: 10upx;
        top: 10upx;
        font-size: 26upx;
        line-height: 40upx;
        text-align: center;
    }

    .dialog-list {
        /* padding: 40upx 20upx; */
    }
	
	.content{
		z-index: 1000;
		text-align: center;
        background: #FFF;
	}

    scroll-view {
        width: 100%;
        height: 100%;
		/* max-height: 80%; */
    }

    .show-dialog {
        animation: 100ms showDialog linear forwards;
    }

    .hide-dialog {
        animation: 100ms hideDialog linear forwards;
    }

    @keyframes hideDialog {
        0% {
            opacity: 1;
        }

        ,
        100% {
            opacity: 0;
        }
    }

    @keyframes showDialog {
        0% {
            opacity: 0;
        }

        ,
        100% {
            opacity: 1;
        }
    }
</style>
